<template>
  <view class="container">
    <scroll-view scroll-y="true" style="box-sizing: border-box; width: 100%; height: 100vh" @scrolltolower="more">
      <view class="list">
        <view class="listitem" v-for="item in list" :key="item.id">
          <view class="left">
            <view style="font-weight: bold; font-size: 40rpx; color: #af825b; margin-bottom: 4rpx">
              {{ item.status_name == '代金卷' ? '减' + item.coupon_price + '元' : item.coupon_price + '折' }}
            </view>
            <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 24rpx; color: #af825b">满{{ item.man_price }}课时</view>
          </view>
          <view style="width: 0; height: 150rpx; border-left: 4rpx dotted #e9d1bc"></view>
          <view class="right">
            <view>
              <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #af825b">{{ item.status_name }}</view>
              <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 24rpx; color: #af825b; margin-top: 24rpx">
                {{ item.start_time + '-' + item.end_time }}
              </view>
            </view>
          </view>
          <view class="gouse" @click="goxuebalist">去使用</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      list: []
    };
  },
  methods: {
    // 查询优惠券
    async getyhj() {
      const res = await uni.$http.post('/coupon/listCoupon', {
        page: this.page,
        use_for: '1',
        period_id: '',
        money: ''
      });
      console.log('优惠卷列表', res);
      if (res.data.data.list.length != 0) {
        this.list.push(...res.data.data.list);
      } else {
        return uni.showToast({
          title: '数据已加载完毕',
          icon: 'none'
        });
      }
    },
    goxuebalist() {
      uni.navigateTo({
        url: '/pages/index/index?status=' + 1 + '&tabbarindex=' + 1
      });
    },
    // 加载更多
    more() {
      this.page++;
      this.getyhj();
    }
  },
  onLoad() {
    // 获取优惠卷
    this.getyhj();
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 30rpx;
  .list {
    .listitem {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 690rpx;
      height: 202rpx;
      background-color: #fcf8f4;
      margin-bottom: 20rpx;
      .left {
        box-sizing: border-box;
        margin: 0 54rpx;
        text-align: center;
      }
      .right {
        margin-left: 30rpx;
      }
      .gouse {
        box-sizing: border-box;
        width: 110rpx;
        height: 44rpx;
        margin-left: 10rpx;
        text-align: center;
        line-height: 44rpx;
        color: #fff;
        font-weight: 500;
        font-size: 26rpx;
        background: #af825b;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
      }
    }
  }
}
</style>
